﻿@{
    ViewBag.Title = "歌曲搜索";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    .el-select .el-input {
        width: 130px;
    }

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .searchdiv{
        width:100%;
        min-height:700px;
    }
    .searchInput {
        height: 135px;
        width: 100%;
        background: #f8f8f8;
        padding-top: 3.8%;
        background-image: url('../Content/imgs/bg_search.jpg')
    }
    .searchInput div {
        margin: 0 auto;
        width: 400px;
    }
    .inp {
        width: 400px;
    }
    .inp > .el-input__inner {
        height: 45px;
        line-height: 45px;
    }
    .searchInput div i:hover {
        color: #0c8ed9;
    }
    .searchInput div .el-input__suffix {
        right: 10px;
    }
    .searchContent {
        min-height: 71%;
        width: 50%;
        padding: 0 25%;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .el-tabs__nav-wrap::after {
        height: 1px;
    }
    .el-tabs__item {
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        padding: 0 30px;
    }
    .el-tabs__active-bar {
        width: 60px !important;
    }
    .el-tabs__nav {
        padding-left: 15px;
    }
    .header {
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #f8f8f8;
        color: #999;
        font-size: 15px;
        padding: 0 10px;
    }
    .on {
        background-color: #fbfbfd;
    }
    .list {
        padding: 0 10px;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        border-bottom: 1px solid #f0f0f0;
    }
    .list:hover {
            background: #f5f8fb;
            color: #14a9ff;
    }
    .zjlist {
        height: 80px;
        line-height: 80px;
        font-size: 13px;
        border-bottom: 1px solid #f0f0f0;
    }        
    .zjlist a {
        text-decoration: none;
        color: black;
    }        
    .zjlist:hover {
        background: #f5f8fb;
        color: #14a9ff;
    }       
    .zjlist:hover a {
        color: #14a9ff;
    }
    .typePage {
        text-align: center;
        margin: 40px 0;
    }
    .typePage .btn-prev, .typePage .btn-next {
        width: 30px;
        height: 30px;
    }
    .typePage .el-pager li {
        margin: 0 20px;
        width: 30px;
        height: 30px;
        line-height: 30px;
    }
</style>
<div id="app">
    <div class="searchdiv">
        <div class="searchInput">
            <div>
                <el-input placeholder="请输入内容" v-model="search" class="inp">
                    <i slot="suffix" class="el-input__icon el-icon-search" style="cursor:pointer;font-size:16px;" @@click="searchKey"></i>
                </el-input>             
            </div>
        </div>
        <div class="searchContent">
            <el-tabs v-model="activeName" v-on:tab-click="handleClick">
                <el-tab-pane label="单曲" name="single">
                    <div style="width:100%;height:40px;font-size:14px;">
                        搜索到与<font style="color:#14a9ff;">{{searchNote}}</font>相关的歌曲&nbsp;,共<font style="color:#14a9ff;">{{pagenation.totalCount}}</font>首
                    </div>
                    <div style="width:100%;">
                        <el-row class="header">
                            <el-col :span="3">序号</el-col>
                            <el-col :span="6">歌曲名</el-col>
                            <el-col :span="3">歌手</el-col>
                            <el-col :span="5">专辑</el-col>
                            <el-col :span="3">时长</el-col>
                            <el-col :span="4">操作</el-col>
                        </el-row>
                        <el-row v-for="(item,index) in searchPlayList" class="list">
                            <el-col :span="3">{{index+1}}</el-col>
                            <el-col :span="6">{{item.Musics.MusicName}}</el-col>
                            <el-col :span="3">{{item.Singer.SingerName}}</el-col>
                            <el-col :span="5">{{item.Albums.AlbumName}}&nbsp;</el-col>
                            <el-col :span="3">{{item.Musics.MusicLong}}</el-col>
                            <el-col :span="4">
                                <el-button v-on:click="ListenMusic(item)" type="text" size="small"><i class="el-icon el-icon-headset" style="font-size:18px;" title="试听"></i></el-button>
                                <el-button v-on:click="BuyMusic(item)" type="text" size="small"><i class="el-icon el-icon-shopping-cart-2" style="font-size:18px;" title="选购"></i></el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <div v-if="searchPlayList.length != 0" class="typePage">
                        <el-pagination background layout="prev, pager, next" :pager-count="6" :total="pagenation.totalCount" v-on:current-change="CurrentChange" :current-page="pagenation.currentPage" >
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="专辑" name="album">
                    <div style="width:100%;height:40px;font-size:14px;">
                        搜索到与<font style="color:#14a9ff;">{{searchNote}}</font>相关的专辑&nbsp;
                    </div>
                    <div style="width:100%;">
                        <el-row class="header">
                            <el-col :span="12">专辑</el-col>
                            <el-col :span="9">歌手</el-col>
                            <el-col :span="3">发行时间</el-col>
                        </el-row>
                        <el-row class="zjlist" v-for="(item,index) in searchAlbumList">
                            <el-col :span="12" style="cursor:pointer;">
                                <img :src="item.Album.AlbumPic" style="width:60px;height:60px;vertical-align:middle" onerror="showDefaultImg(this)"/><a @@click="AblumInfo(item.Album.AlbumId)">{{item.Album.AlbumName}}</a>
                            </el-col>
                            <el-col :span="9">
                                {{item.Singer.SingerName}}
                            </el-col>
                            <el-col :span="3">
                                {{item.Album.AlbumTime}}&nbsp;
                            </el-col>
                        </el-row>
                    </div>
                    <div v-if="searchAlbumList.length != 0" class="typePage">
                        <el-pagination background layout="prev, pager, next" :pager-count="6" :total="pagenations.totalCount" v-on:currentchange="CurrentChanges" :current-page="pagenations.currentPage">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                @*<el-tab-pane label="歌手" name="singer">歌手</el-tab-pane>*@
            </el-tabs>
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                search: '',
                activeName: 'single',
                searchPlayList: [],
                searchAlbumList: [],
                searchNote: '',
                pagenation: {
                    currentPage: 1,
                    totalCount: 0,
                },//分页信息
                pagenations: {
                    currentPage: 1,
                    totalCount: 0,
                },//分页信息
            }
        },
        methods: {
            handleClick(tab, event) {
                localStorage.setItem('tab', tab.name);
                localStorage.setItem('url', window.location.href)
                if (this.search !== "" || this.search !== null || this.search !== undefined) {
                    if (tab.name == "single") {
                        this.GetMusicLists()
                    }
                    if (tab.name == "album") {
                        this.GetAlbumLists()
                    }
                }
            },
            ListenMusic(row) {
                var info = JSON.parse(localStorage.getItem("ListenMusicLists")) || []
                if (info != []) {
                    if (info[0].MusicId != row.Musics.MusicId) {
                        let music = [{
                            'MusicId': row.Musics.MusicId,
                            'cover': '../musicImg/cover3.jpg',
                            'src': '../music/星弟 _ 小贱（谭冰尧） - 不想做朋友.mp3',
                            'title': row.Musics.MusicName + '-' + row.Singer.SingerName,
                        }]
                        localStorage.setItem('ListenMusicLists', JSON.stringify(music));
                        $(function () {
                            var setConfig = {
                                song: JSON.parse(localStorage.getItem('ListenMusicLists')),
                                error: function (meg) {
                                    console.log(meg);
                                }
                            };
                            var audioFn = audioPlay(setConfig);
                            if (audioFn) {
                                audioFn.loadFile(true);
                            }
                        });
                        this.$message({
                            message: '正在播放，请稍等...',
                            type: 'success'
                        });
                        axios.post('/Music/AddClickCount', { 'id': row.Musics.MusicId })
                    }
                }


            },
            BuyMusic(row) {
                var lists = localStorage.getItem('BuyLists')
                lists = lists ? JSON.parse(lists) : [];
                const buy = {
                    'id': row.Musics.MusicId,
                    'MusicName': row.Musics.MusicName,
                    'SingerName': row.Singer.SingerName,
                    'MusicLong': row.Musics.MusicLong,
                    'MusicBit': row.Musics.MusicBitRate,
                    'MusicAblum': row.Albums.AlbumName
                }
                let count = 0;
                if (lists.length > 0) {
                    for (var i = 0; i < lists.length; i++) {
                        if (row.Musics.MusicId == lists[i].id) {
                            count = count + 1;
                            this.$message.error('已经存在此歌曲!');
                            break;
                        }
                    }
                }
                if (count == 0) {
                    lists.push(buy);
                    this.$message({
                        message: '成功加入购物车',
                        type: 'success'
                    });
                }
                localStorage.setItem("BuyLists", JSON.stringify(lists));

            },
            searchKey() {
                localStorage.setItem('keyword', this.search)
                if (this.activeName == "single") {
                    this.GetMusicLists()
                }
                if (this.activeName == "album") {
                    this.GetAlbumLists()
                }
                this.searchNote = this.search
            },
            CurrentChange(val) {
                this.pagenation.currentPage = val
                this.GetMusicLists();
            },//分页当前页改变
            CurrentChanges(val) {
                this.pagenations.currentPage = val
                this.GetAlbumLists();
            },//分页当前页改变
            GetMusicLists() {
                axios.post('/Home/SearchKey', { 'CurrentPage': this.pagenation.currentPage, 'keyWord': this.search }).then(res => {
                    this.searchPlayList = res.data.data
                    this.pagenation.totalCount = res.data.totalCount
                })
            },
            GetAlbumLists() {
                axios.post('/Home/SearchAlbumKey', { 'CurrentPage': this.pagenations.currentPage, 'keyWord': this.search }).then(res => {
                    this.searchAlbumList = res.data.data
                    this.pagenations.totalCount = res.data.totalCount
                })
            },
            AblumInfo(id) {
                window.open('/Album/AlbumList?id=' + id, "_self");
            }
        },
        mounted() {
            if (localStorage.getItem('url') == window.location.href) {
                var tab = localStorage.getItem('tab');
                if (tab != null) {
                    this.activeName = tab
                }
            }
            this.search = localStorage.getItem('keyword')
            this.searchNote = this.search
            console.log(this.search);
            if (this.search !== "" || this.search !== null || this.search !== undefined) {
                if (this.activeName == "single") {
                    this.GetMusicLists()
                }
                if (this.activeName == "album") {
                    this.GetAlbumLists()
                }
            }       
        },
        created() {
            var _this = this;
            document.onkeydown = function (e) {
                let key = window.event.keyCode;
                if (key == 13) {
                    if (_this.search != "") {
                        _this.searchKey()
                    }
                }
            };
        },//按回车键登录
    })
    $(".searchContent ul li").click(function () {
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
    });
    function showDefaultImg(img) {
        img.src = "../Content/1111.png";
        //不循环执行
        img.onerror = null;
    }
</script>